{extend name='layout/app' /}

{block name='css'}
    <link rel="stylesheet" href="__STATIC__/css/login.css">
{/block}

{block name='content'}
<div id="app">
    <div class="nav">
        <div>用户登录</div>
    </div>

    <div class="init-avatar">
        <div class="avatar-wrapper">
            <img src="__STATIC__/imgs/user-reg_default-avatar.png" alt="">
        </div>
    </div>

    <div class="reg-area">
        <div class="reg-item">
            <el-input
                    placeholder="请输入手机号码"
                    prefix-icon="iconfont icon-phone"
                    v-model="phone" clearable id="phone">
            </el-input>
            <div class="tips"></div>
        </div>

        <div class="reg-item">
            <el-input
                      placeholder="请输入密码"
                      prefix-icon="iconfont icon-lock"
                      v-model="pwd" clearable id="pwd" show-password>
            </el-input>
            <div class="tips"></div>
        </div>
        <div class="forget-pwd">
            <a href="/index/login/forgetpwd">忘记密码?</a>
        </div>
        <div class="error-tip">账号或密码错误</div>

        <div class="option">
            <el-button type="primary" @click="btnReg" round>登录</el-button>
            <el-button round class="register" @click="register">注册</el-button>
        </div>
    </div>
</div>
{/block}

{block name='footer'}{/block}

{block name='js'}
<script>
    var that
    new Vue({
        el:'#app',
        data: {
            phone: '',
            pwd: ''
        },
        mounted() {
            that = this  //生成vue副本
            $('.reg-item input').focus(function () {
                $('.error-tip').hide()
            })
        },
        methods: {
            btnReg() {
                $.post('check',{phone:this.phone,pwd:this.pwd},function (res) {
                    console.log(res)
                    if(res.code === 0) {
                        location.href = '/index.html'
                    }else {
                        $('.error-tip').show().text(res.msg)
                    }
                },'json')
            },
            register() {
                window.location.href = '/register.html'
            }
        }
    });

</script>
{/block}